<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>看看天气</title>

    <link rel="stylesheet" href="../static/css/vue_animation.css">
    <link rel="stylesheet" href="../static/css/collapse.css">
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/animation.css">
    <link rel="stylesheet" href="../static/css/toast.css">

    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/js/popper-1.14.3.js"></script>
    <script src="../static/js/bootstrap-4.3.1.js"></script>
    <script src="../static/js/toast.js"></script>
    <script src="../static/js/myToast.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.js"></script>
    <script src="http://api.map.baidu.com/getscript?v=2.0&ak=BUiwghp3PnFiAzKxwob6h68l68QP9g4l"></script>
    <script src="../static/js/echarts-5.0.2-all.min.js"></script>
    <script src="../static/js/echart-wordcloud.js"></script>
    <script src="../static/js/vue.js"></script>
    <script src="../static/js/axios.js"></script>

    <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>


    <style>

        .overview {
            height: 200px;
            border-radius: 1rem;
            transition: all 1s ease 0s;
        }

        .link-chart {
            height: 200px;
            margin-top: 50px;
        }

        .arrow {
            width: 20px;
            height: 20px;
            margin-top: -2px;
        }

        .arrow-up {
            background-image: url("/static/img/箭头上.png");
        }

        .arrow-down {
            background-image: url("/static/img/箭头下.png");
        }


    </style>
    <script>
        //  激活toast
        $('[data-toggle="popover"]').popover({
            container: 'body',
            title: 'Search',
            html: true,
            placement: 'bottom',
            sanitize: false,
            content: function () {
                return $("#PopoverContent").html();
            }
        });
    </script>
</head>

<body>
<div class="container-fluid">
    <div class="row">

        <div class="col-md-1 bg-light">
            <nav class="nav flex-lg-column navbar-expand-xl navbar-light" style="position: sticky; top:0;">

                <a class="navbar-brand" href="#">
                    <img src="../static/img/天气.png" style="width: 60px; height: 60px;">
                </a>

                <button class="navbar-toggler" style="position: absolute; right: 0;" type="button"
                        data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarTogglerDemo01">

                    <ul class="navbar-nav flex-sm-column w-100 text-center">
                        <li class="nav-item mt-xl-4">
                            <a class="nav-link" href="#">新&nbsp;&nbsp;&nbsp;&nbsp;闻</a>
                        </li>
                        <li class="nav-item mt-xl-4">
                            <a class="nav-link" href="#">数据源</a>
                        </li>
                        <li class="nav-item mt-xl-4">
                            <a class="nav-link" href="#">组织架构</a>
                        </li>
                        <li class="nav-item mt-xl-4">
                            <a class="nav-link" href="#">关&nbsp;&nbsp;&nbsp;&nbsp;于</a>
                        </li>

                    </ul>
                </div>
            </nav>
        </div>

        <div class="col-md-11 d-xl-inline-flex">
            <div class="col-12 col-xl-6">
                <div class="row align-items-center justify-content-center" style="margin-top: 100px">

                    <div class="col-8" id="search_box">
                        <div class="input-group shadow-lg">
                            <input v-model="cur_text" @keyup.enter="search_click()" data-toggle="collapse"
                                   data-target="#search_collapse" type="text" style="height: 60px;" class="form-control"
                                   placeholder="搜索城市">
                            <div class="input-group-append">
                                <button @click="search_click()" class="btn btn-success" type="button"
                                        style="height: 60px;">搜索
                                </button>
                            </div>
                        </div>

                        <div class="collapse" id="search_collapse"
                             style="height: 200px; max-height: 300px; overflow: scroll;overflow-x: hidden;">
                            <p v-for="city in box">
                                <a @click="autofill(city)">{{ city }}</a>
                            </p>
                        </div>

                    </div>

                </div>

                <div class="row text-center ">
                    <p class="m-3 w-100">最后更新于: Jun 11 2021</p>
                </div>


                <div id="overview" class="">
                    <div class="row">
                        <p class="m-3 w-100">您所在的城市: {{ cur_city }}</p>
                    </div>

                    <!--总览视图-->
                    <div class="row text-center">

                        <div class="overview col-4" id="max_temp_card">
                            <p><strong>最高气温</strong></p>
                            <transition name="slide-fade">
                                <div v-if="show">
                                    <p class="display-3">{{ max_temp }}</p>
                                    <p>
                                        <strong><img :src="get_arrow(diff_max_temp)" class="arrow">{{
                                            diff_max_temp>0?diff_max_temp:-diff_max_temp }}</strong>
                                    </p>
                                </div>
                            </transition>
                        </div>
                        <div class="overview col-4" id="min_temp_card">
                            <p><strong>最低气温</strong></p>
                            <transition name="slide-fade">
                                <div v-if="show">
                                    <p class="display-3">{{ min_temp }}</p>
                                    <p>
                                        <strong><img :src="get_arrow(diff_min_temp)" class="arrow">
                                            {{ diff_min_temp>0?diff_min_temp:-diff_min_temp }}</strong>
                                    </p>
                                </div>
                            </transition>
                        </div>
                        <div class="overview col-4" id="rain_poss_card">
                            <p><strong>降水概率</strong></p>
                            <transition name="slide-fade">
                                <div v-if="show">
                                    <p class="display-3">{{ rain_poss }}%</p>
                                    <p>
                                        <strong><img :src="get_arrow(diff_rain_poss)" class="arrow">
                                            {{ diff_rain_poss>0?diff_rain_poss:-diff_rain_poss }}</strong>
                                    </p>
                                </div>
                            </transition>
                        </div>

                    </div>

                    <div class="row mt-xl-5 mb-3">
                        <button class="btn btn-danger w-75 m-auto">我不在此处</button>
                    </div>
                </div>
                <table id="weather_table" class="table table-hover text-center text-justify mt-xl-4">
                    <thead>
                    <tr>
                        <th>
                            #
                        </th>
                        <th>日&nbsp;&nbsp;&nbsp;&nbsp;期</th>
                        <th>最高气温</th>
                        <th>最低气温</th>
                        <th>降水概率</th>



                    </tr>
                    </thead>

                    <tbody>
                    <tr>
                        <th>1</th>
                        <th>24</th>
                        <th>24</th>
                        <th>24</th>
                        <th>12%</th>
                    </tr>
                    </tbody>

                </table>


                <div class="row mt-5" style="min-height: 300px">
                    <div id="word_cloud" class="col-xl-12"></div>
                    <div id="biggest_temp_diff" class="col-xl-12"></div>
                </div>

            </div>


            <!--                右侧-->
            <div class="col-12 col-xl-5">
                <div class="text-center" style="margin-top: 80px; margin-bottom: 40px;">
                    <h2 class="card-title text-center" id="cur_time">Time</h2>
                </div>


                <div style="height: 500px;" class="w-100 mt-4 ">
                    <div id="map" class="w-100 h-100" style="border-radius: 20%;"></div>
                </div>

                <div>
                    <h2 class="text-center mt-4 font-weight-bold">天气走势</h2>
                </div>

                <div class="flex-md-column w-100">
                    <div class="link-chart m-auto" id="max_temp_diff_chart"></div>
                    <div class="link-chart m-auto" id="min_temp_diff_chart"></div>
                    <div class="link-chart m-auto" id="rain_poss_diff_chart"></div>
                </div>

                <div class="row justify-content-center">
                    <div class="col-6">
                        <!-- style="width: 18rem;"-->
                        <div class="card">
                            <img src="../static/img/西湖.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">西湖</h5>
                                <p class="card-text">
                                    西湖有100多处公园景点，包括三秋桂子、六桥烟柳、九里云松、十里荷花景观、有“西湖十景”、“新西湖十景”、“三评西湖十景”之说，有60多处国家、省、市级重点文物保护单位和20多座博物馆。</p>
                                <a href="https://baike.baidu.com/item/%E8%A5%BF%E6%B9%96/4668821?fr=aladdin" class="btn btn-primary">Go somewhere</a>
                            </div>
                        </div>

                    </div>

                    <div class="col-6">
                        <div class="card">
                            <img src="../static/img/千岛湖.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">千岛湖</h5>
                                <p class="card-text">
                                    千岛湖与加拿大渥太华金斯顿千岛湖、湖北黄石阳新仙岛湖并称为"世界三大千岛湖"。千岛湖水在中国大江大湖中位居优质水之首，为国家一级水体，被誉为“天下第一秀水”。</p>
                                <a href="https://baike.baidu.com/item/%E5%8D%83%E5%B2%9B%E6%B9%96/32892?fr=aladdin" class="btn btn-primary">Go somewhere</a>
                            </div>
                        </div>

                    </div>
                </div>


            </div>
        </div>


        <div class="col-12 text-center">
            <p>All Right Reserved.</p>
        </div>
    </div>
</div>


<script src="../static/js/bmap.js"></script>
<script src="../static/js/weather_map_gen.js"></script>
<script src="../static/js/max_temp_diff_chart_chart.js"></script>
<script src="../static/js/rain_poss_diff_chart.js"></script>
<script src="../static/js/min_temp_diff_chart.js"></script>
<script src="../static/js/total_death_chart.js"></script>
<script src="../static/js/util.js"></script>
<script src="../static/js/weather_table.js"></script>
<script src="../static/js/search_bar_gen.js"></script>
<script src="../static/js/word_cloud_biggest_temp_diff.js"></script>
<script src="../static/js/word_cloud.js"></script>


<script>
    function dateFormatter(base) {
        var month = base.getMonth() + 1 < 10 ? '0' + (base.getMonth() + 1) : base.getMonth() + 1
        var date = base.getDate() < 10 ? '0' + base.getDate() : base.getDate()
        return base.getFullYear() + month + date

    }

    // custom vue
    var search_box = new Vue({
        el: '#search_box',
        data: {
            is_selected: true,
            cur_text: '',
            box: [],

        },
        watch: {
            // 如果 `question` 发生改变，这个函数就会运行
            cur_text: function (newVal, oldVal) {
                this.box = this.matching(newVal)
            }
        },
        methods: {
            matching: function (text) {
                var list = []
                if (text == '') {
                    return list
                }
                Object.keys(citys).forEach(province => {
                    Object.keys(citys[province]).forEach(city => {
                        Object.keys(citys[province][city]).forEach(area => {
                            if (citys[province][city][area]['NAMECN'].indexOf(text) != -1) {
                                list.push(area)
                            }
                        })
                    })
                })
                return list
            },
            autofill: function (city) {
                this.cur_text = city
            },
            search_click: function () {
                overview.show = false
                overview.cur_city = this.cur_text
                // TODO 刷新表格
                getDataTest(this.cur_text)
                this.cur_text = ''
            }
        }
    })


    var overview = new Vue({
        el: "#overview",
        data: {
            arrow: '../static/img/箭头上.png',
            max_temp: 19,
            min_temp: 10,
            rain_poss: 20,
            show: false,
            cur_city: '北京',
            diff_max_temp: 0,
            diff_min_temp: 0,
            diff_rain_poss: 0
        },
        mounted: function () {
            this.cur_city = returnCitySN["cname"] == null ? "长沙" : returnCitySN["cname"].split("省")[1].replace("市", "")


            axios.get('/get_weather_by_area_and_date/' + this.cur_city + "/" + dateFormatter(new Date())).then(res => {
                console.log(res.data)
                console.log(res.data[0].max_temp + '' + res.data[0].min_temp)
                this.max_temp = res.data[0].max_temp
                this.min_temp = res.data[0].min_temp
                this.rain_poss = res.data[0].rain_poss

                axios.get('/get_weather_by_area_and_date/' + this.cur_city + "/" + dateFormatter(new Date(+new Date() - 3600 * 24 * 1000))).then(res => {

                    this.diff_max_temp = this.max_temp - res.data[0].max_temp
                    this.diff_min_temp = this.min_temp - res.data[0].min_temp
                    this.diff_rain_poss = this.rain_poss - res.data[0].rain_poss
                    this.show = true
                }).catch(err => {
                    console.log('获取overview失败')
                })

            }).catch(err => {
                console.log(err)
            })


        },
        methods: {
            get_arrow: function (val) {
                return val > 0 ? "../static/img/箭头上.png" : "../static/img/箭头下.png"
            },
            getData: function (city) {
                axios.get('/get_weather_by_area_and_date/' + city + "/" + dateFormatter(new Date())).then(res => {
                    // console.log(res.data)
                    // console.log(res.data[0].max_temp + '' + res.data[0].min_temp)
                    this.max_temp = res.data[0].max_temp
                    this.min_temp = res.data[0].min_temp
                    this.rain_poss = res.data[0].rain_poss

                    axios.get('/get_weather_by_area_and_date/' + city + "/" + dateFormatter(new Date(+new Date() - 3600 * 24 * 1000))).then(res => {

                        this.diff_max_temp = this.max_temp - res.data[0].max_temp
                        this.diff_min_temp = this.max_temp - res.data[0].min_temp
                        this.diff_rain_poss = this.max_temp - res.data[0].rain_poss
                        this.show = true
                    }).catch(err => {
                        console.log('获取overview失败')
                    })

                }).catch(err => {
                    console.log(err)
                })
            }
        },
        watch: {
            cur_city: function (newVal, oldVal) {
                this.getData(newVal)
            }
        }
    })


</script>
</body>

</html>